<template>
  <view>
    <nav-bar title="选择地区"></nav-bar>
    <scroll-view scroll-y="true" :style="{ height: mainHeight }" :scroll-into-view="LetterId">
      <view class="main-Location">
      <!-- 字母区域 -->
      <view class="Location-Letter">
        <view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
        <view
          v-for="(item, index) in LatterName"
          :key="index"
          hover-class="Click-Latter"
          @tap="getLetter(item)"
          :style="{ 'color': LetterId === item ? '#19BE6B' : '#000' }"
        >{{ item }}</view>
      </view>
        <view class="ynq-cityList">
          <block v-for="(item, index) in cityList" :key="index">
            <view class="ynq-CityLetter" :id="item.initial">{{ item.initial }}</view>
            <view class="ynq-CityLine">
              <text @tap="getStorage(item_city)" v-for="(item_city, name_index) in item.list"
                :key="name_index">{{ item_city.name }}</text>
            </view>
          </block>
        </view>
    </view>
    </scroll-view>

  </view>
</template>

<script>
import NavBar from "../../components/nav-bar";
import { cityData } from '@/utils/city'
import api_home from '@/api/home'
export default {
  name: 'city',
  components: { NavBar },
  data() {
    return {
      LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      cityList: [], //引用json数据
      LetterId: '',
      mainHeight:'',
      cities:[]
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight
    this.getAreaList()
  },
  methods: {
    getAreaList() {
      api_home.fetchAreaList().then(res => {
        this.cityList = res.data
      })
    },
    getLetter(name) {
      this.LetterId = name
      uni.pageScrollTo({
        selector: '#' + name,
        duration: 300
      })
    }, //  跳转城市首字母定位

    // 存储城市缓存（点击城市）
    getStorage(item) {
      const params = {
        code: item.code,
        city: item.name,
		reload: true
      }
      uni.$emit('city', params) // 返回上一页并传数据 
      uni.navigateBack({
        delta: 1 //返回上一页
      })
    }
  }
}
</script>

<style lang="scss" scoped>

// 侧边字母选择栏
.Location-Letter {
  position: fixed;
  right: 5rpx;
  top: 220rpx;
  width: 30rpx;
  z-index: 100;

  view {
    display: block;
    width: 30rpx;
    text-align: center;
    height: 35rpx;
    line-height: 35rpx;
    font-size: 12px;
    transition: ease .3s;
    -webkit-transition: ease .3s;
  }
}

// 城市列表
.ynq-cityList {

  padding: 10px 0;

  .ynq-CityLetter {
    line-height: 30rpx;
    height: 30rpx;
    font-size: 16px;
    // border-bottom: 1px solid #f7f7f7;
    padding-left: 10rpx;
    color: #909090;
  }

  .ynq-CityLine {
    background-color: #fff;
    margin: 20rpx 0px;

    text {
      display: block;
      line-height: 60rpx;
      padding: 20rpx 30rpx;
      font-size: 30rpx;
      color: #767676;
      border-bottom: 1px solid #f4f4f4;
    }
  }
}
</style>